<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <script src="/layui-v2.5.6/layui.js" ></script>
    <link rel="stylesheet" href="/layui-v2.5.6/css/layui.css">
</head>
<body id="indexContentSetting" >

<!--流程变量表单-->
<form class="layui-form" lay-filter="indexContentSettingForm" id="indexContentSettingForm">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>设置成本报告率<span class="layui-word-aux" style="font-size: 15px">在总经理审批前必须有数据（业务经理审批完就会部署数据）：小于20会走总裁审批</span></legend>
    </fieldset>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 90px">成本报告利率</label>
        <div class="layui-input-inline">
            <input type="text" name="grossMarginRate" required  lay-verify="required"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>设置审批用户信息<span class="layui-word-aux" style="font-size: 15px">还未审批人员(不包括正在审批)设置有效</span></legend>
    </fieldset>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 90px">发送方邮箱</label>
        <div class="layui-input-inline">
            <input type="tel" name="fromMail" required lay-verify="required" placeholder="发送给每个审批人的邮箱" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label" >申请人</label>

        <div class="layui-input-inline">
            <select id="submitNameId" name="submitName" lay-verify="required">
                <option>空</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <input type="tel" name="toMail" required lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 90px">项目经理</label>
        <div class="layui-input-inline">
            <select id="taskName1Id" name="taskName1" lay-verify="required">
                <option>空</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <input type="tel" name="toMail1" required lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label" style="width: 90px">部门经理</label>
        <div class="layui-input-inline">
            <select id="taskName2Id" name="taskName2" lay-verify="required">
                <option>空</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <input type="tel" name="toMail2" required lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 90px">总经理</label>
        <div class="layui-input-inline">
            <select id="taskName3Id" name="taskName3" lay-verify="required">
                <option>空</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <input type="tel" name="toMail3" required lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label" style="width: 90px">总裁</label>
        <div class="layui-input-inline">
            <select id="taskName4Id" name="taskName4" lay-verify="required">
                <option>空</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <input type="tel" name="toMail4" required lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <!--部门经理中进行设置财务信息-->
        <legend>设置财务信息<span class="layui-word-aux" style="font-size: 15px">在总经理审批前必须有相应的财务人员信息（部门经理审批完就会部署财务人员信息）</span></legend>
    </fieldset>
    <div class="layui-form-item">
        <label class="layui-form-label " style="width: 90px">分配财务人数</label>
        <div class="layui-input-inline">
            <div class="layui-input-inline">
                <select name="caiwuCount">
                    <option value=""></option>
                    <option value="1">1人</option>
                    <option value="2">2人</option>
                    <option value="3">3人</option>
                </select>
            </div>
        </div>
        <label class="layui-form-label" style="width: 90px">设置财务类型</label>
        <div class="layui-input-inline">
            <select name="saleType" lay-filter="indexContentSaleType">
                <option value=""></option>
                <option value="内销">内销</option>
                <option value="外销">外销</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label" style="width: 90px">外销财务一</label>
    <div class="layui-input-inline">
        <select id="waiXiaoCaiWuId" name="waiXiaoCaiWu" >
            <option value="-1">请选择</option>
        </select>
    </div>
    <div class="layui-input-inline">
        <input type="tel" name="waiXiaoCaiWuMail"  placeholder="请输入邮箱" autocomplete="off" class="layui-input">
    </div>
    <label class="layui-form-label" style="width: 90px">外销财务二</label>
    <div class="layui-input-inline">
        <select id="waiXiaoCaiWu2Id" name="waiXiaoCaiWu2" >
            <option value="-1">请选择</option>
        </select>
    </div>
    <div class="layui-input-inline">
        <input type="tel" name="waiXiaoCaiWuMail2"  placeholder="请输入邮箱" autocomplete="off" class="layui-input">
    </div>
</div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 90px">外销财务三</label>
        <div class="layui-input-inline">
            <select id="waiXiaoCaiWu3Id" name="waiXiaoCaiWu3"  >
                <option value="-1">请选择</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <input type="tel" name="waiXiaoCaiWuMail3"  placeholder="请输入邮箱" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 90px">内销财务一</label>
        <div class="layui-input-inline">
            <select id="neiXiaoCaiWuId" name="neiXiaoCaiWu">
                <option value="-1">请选择</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <input type="tel" name="neiXiaoCaiWuMail"  placeholder="请输入邮箱" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label" style="width: 90px">内销财务二</label>
        <div class="layui-input-inline">
            <select id="neiXiaoCaiWu2Id" name="neiXiaoCaiWu2">
                <option value="-1">请选择</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <input type="tel" name="neiXiaoCaiWuMail2"  placeholder="请输入邮箱" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 90px">内销财务三</label>
        <div class="layui-input-inline">
            <select id="neiXiaoCaiWu3Id" name="neiXiaoCaiWu3">
                <option value="-1">请选择</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <input type="tel" name="neiXiaoCaiWuMail3"  placeholder="请输入邮箱" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="text-align: center">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit lay-filter="indexContentSetting">立即设置</button>
        </div>
    </div>
</form>
    <script>
        layui.use(['form','jquery','layer'],function () {
            var form=layui.form;
            var layer=layui.layer;
            var $=layui.jquery;

            //渲染select框的数据
            //获取用户的数据
            var userData=ajax($,"post","/system/activiti/getUser",{});
            userData.forEach(function (val) {
                $("#submitNameId").append(new Option(val.userName,val.userId))
                $("#taskName1Id").append(new Option(val.userName,val.userId))
                $("#taskName2Id").append(new Option(val.userName,val.userId))
                $("#taskName3Id").append(new Option(val.userName,val.userId))
                $("#taskName4Id").append(new Option(val.userName,val.userId))
                $("#neiXiaoCaiWu3Id").append(new Option(val.userName,val.userId))
                $("#neiXiaoCaiWu2Id").append(new Option(val.userName,val.userId))
                $("#neiXiaoCaiWuId").append(new Option(val.userName,val.userId))
                $("#waiXiaoCaiWu3Id").append(new Option(val.userName,val.userId))
                $("#waiXiaoCaiWu2Id").append(new Option(val.userName,val.userId))
                $("#waiXiaoCaiWuId").append(new Option(val.userName,val.userId))
            })

            //流程id
            var procInstId=GetRequest("processInstanceId")

            //查询流程中的变量进行赋值form表单中
            queryFormAssignment (form,$,layer,procInstId);

            //监听按钮【立即提交】
            form.on('submit(indexContentSetting)', function(data){

                //把实例id封装到data对象中去
                var data=data.field
                data.procInstId=procInstId

                modifyProcessData($,data)

                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

            //:监听内销和外销
            form.on('select(indexContentSaleType)', function(data){
                var saleType=data.value;
                if (saleType=="内销"){
                    //把外销设置为禁用
                    $("#waiXiaoCaiWuId").attr("disabled","disabled")
                    $("#waiXiaoCaiWu2Id").attr("disabled","disabled")
                    $("#waiXiaoCaiWu3Id").attr("disabled","disabled")
                    $("#waiXiaoCaiWuId").val("-1")
                    $("#waiXiaoCaiWu2Id").val("-1")
                    $("#waiXiaoCaiWu3Id").val("-1")
                    $("input[name='waiXiaoCaiWuMail']").attr("disabled","disabled")
                    $("input[name='waiXiaoCaiWuMail']").val("")
                    $("input[name='waiXiaoCaiWuMail2']").attr("disabled","disabled")
                    $("input[name='waiXiaoCaiWuMail2']").val("")
                    $("input[name='waiXiaoCaiWuMail3']").attr("disabled","disabled")
                    $("input[name='waiXiaoCaiWuMail3']").val("")
                    //清除内销禁用
                    $("#neiXiaoCaiWuId").removeAttr("disabled")
                    $("#neiXiaoCaiWu2Id").removeAttr("disabled")
                    $("#neiXiaoCaiWu3Id").removeAttr("disabled")
                    $("input[name='neiXiaoCaiWuMail']").removeAttr("disabled")
                    $("input[name='neiXiaoCaiWuMail2']").removeAttr("disabled")
                    $("input[name='neiXiaoCaiWuMail3']").removeAttr("disabled")
                }else{
                    //把内销设置为禁用
                    $("#neiXiaoCaiWuId").attr("disabled","disabled")
                    $("#neiXiaoCaiWu2Id").attr("disabled","disabled")
                    $("#neiXiaoCaiWu3Id").attr("disabled","disabled")
                    $("#neiXiaoCaiWu3Id").val("-1")
                    $("#neiXiaoCaiWu2Id").val("-1")
                    $("#neiXiaoCaiWuId").val("-1")
                    $("input[name='neiXiaoCaiWuMail']").attr("disabled","disabled")
                    $("input[name='neiXiaoCaiWuMail']").val("");
                    $("input[name='neiXiaoCaiWuMail2']").attr("disabled","disabled")
                    $("input[name='neiXiaoCaiWuMail2']").val("");
                    $("input[name='neiXiaoCaiWuMail3']").attr("disabled","disabled")
                    $("input[name='neiXiaoCaiWuMail3']").val("");
                    //清除外销禁用
                    $("#waiXiaoCaiWuId").removeAttr("disabled")
                    $("#waiXiaoCaiWu2Id").removeAttr("disabled")
                    $("#waiXiaoCaiWu3Id").removeAttr("disabled")
                    $("input[name='waiXiaoCaiWuMail']").removeAttr("disabled")
                    $("input[name='waiXiaoCaiWuMail2']").removeAttr("disabled")
                    $("input[name='waiXiaoCaiWuMail3']").removeAttr("disabled")
                }

                form.render()//改变了select框状态后，居然layui还要重新渲染的
            });

            form.render();
        })

        function modifyProcessData($,data) {
            var  rData=ajax($,"post","/system/activiti/updateVariable",data)
            if (rData.status==200){
                layer.msg("修改成功，正在关闭窗口-----")
                window.setTimeout(function () {
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                },999)

            }else {
                layer.msg(rData.msg)
            }
        }
        
        function queryFormAssignment (form,$,layer,procInstId) {
           var data= ajax($,"post","/system/activiti/selectVariable",{"procInstId":procInstId})
            if(data.status==200){
                var acMail= data.obj.acMail
                var activitiUser= data.obj.activitiUser
                form.val("indexContentSettingForm", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                    "neiXiaoCaiWu": activitiUser.neiXiaoCaiWu
                    ,"neiXiaoCaiWu2": activitiUser.neiXiaoCaiWu2
                    ,"neiXiaoCaiWu3": activitiUser.neiXiaoCaiWu3
                    ,"waiXiaoCaiWu": activitiUser.waiXiaoCaiWu
                    ,"waiXiaoCaiWu2": activitiUser.waiXiaoCaiWu2
                    ,"waiXiaoCaiWu3": activitiUser.waiXiaoCaiWu3
                    ,"waiXiaoCaiWuMail": acMail.waiXiaoCaiWuMail        //外销邮箱
                    ,"waiXiaoCaiWuMail2": acMail.waiXiaoCaiWuMail2
                    ,"waiXiaoCaiWuMail3": acMail.waiXiaoCaiWuMail3
                    ,"neiXiaoCaiWuMail": acMail.neiXiaoCaiWuMail
                    ,"neiXiaoCaiWuMail2": acMail.neiXiaoCaiWuMail2
                    ,"neiXiaoCaiWuMail3": acMail.neiXiaoCaiWuMail3
                    ,"toMail4": acMail.toMail4
                    ,"toMail3": acMail.toMail3
                    ,"toMail2": acMail.toMail2
                    ,"toMail1": acMail.toMail1
                    ,"toMail": acMail.toMail
                    ,"submitName": activitiUser.submitName
                    ,"taskName": activitiUser.taskName
                    ,"taskName1": activitiUser.taskName1
                    ,"taskName2": activitiUser.taskName2
                    ,"taskName3": activitiUser.taskName3
                    ,"taskName4": activitiUser.taskName4
                    ,"fromMail": acMail.fromMail
                    ,"grossMarginRate": data.obj.grossMarginRate
                    ,"saleType": data.obj.saleType
                    ,"caiwuCount": activitiUser.caiwuCount
                });
            }else {
                layer.msg(data.msg)
            }

        }

        //此页面调用使用的是ifform方式；获取请求中的参数
        function GetRequest() {
            var url = location.search; //获取url中"?"符后的字串
            if (url.indexOf("?") != -1) {    //判断是否有参数
                var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
                strs = str.split("=");   //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）
                return strs[1]; //直接弹出第一个参数 （如果有多个参数 还要进行循环的）
            }
        }

        //由于是ifrom框页面，用不了主页中预设的js、css，自己写一个ajax
        function ajax($,method,urlpath,data) {
            var resultData;
            $.ajax({
                method:method,
                url:urlpath,
                async : false,//此处需要注意的是要想获取ajax返回的值这个async属性必须设置成同步的，否则获取不到返回值
                data:data,
                success:function (data) {
                    resultData=data;
                }
            })
            return resultData;
        }
    </script>

</body>
